<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">销量统计表</div>
      <div class="sub_title">1901 - 1914 服装销量统计表</div>
      <slot name="title"></slot>
    </div>
    <div id="bar_basic" style="width: 100%"></div>
    <div class="title">配置交互方式有两种(两种方法不冲突)</div>
    <div class="subtitle">
      1. 配置 chart 的 defaultInteractions(配置完修改重新渲染无效)
    </div>
    <!-- 这里代码中只是简单的进行配置，使用的是自带的交互 -->
    <div class="subtitle">2. 自定义默认 interaction</div>
    <div class="checkgroup">
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="option in checkOptions"
          :key="option.value"
          :label="option.value"
          border
          size="medium"
          style="margin: 8px 16px"
        >
          {{ option.text }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
export default {
  data() {
    return {
      chart: null,
      checkList: ["tooltip"],
      checkOptions: [
        {
          value: "tooltip",
          text: "显示提示框",
        },
        {
          value: "element-active",
          text: "鼠标移入元素激活",
        },
        {
          value: "active-region",
          text: "鼠标移入背景框",
        },
        {
          value: "view-zoom",
          text: "图表内部缩放",
        },
        {
          value: "element-selected",
          text: "点击多选（与单选冲突）",
        },
        {
          value: "element-single-selected",
          text: "点击单选（与多选冲突）",
        },
        {
          value: "element-highlight",
          text: "移入元素高亮",
        },
        {
          value: "element-highlight-by-color",
          text: "移入相同颜色元素高亮",
        },
        {
          value: "legend-filter",
          text: "点击图例过滤",
        },
        {
          value: "legend-visible-filter",
          text: "点击图例过滤（无动画）",
        },
        {
          value: "legend-active",
          text: "图例项 active，对应的图表元素也 active",
        },
        {
          value: "legend-highlight",
          text: "图例项高亮，对应的图表元素也高亮",
        },
        {
          value: "axis-label-highlight",
          text: "坐标轴文本高亮，对应的图表元素也高亮",
        },
        {
          value: "element-list-highlight",
          text: "鼠标触发图表元素高亮，同时对应的列表组件（图例、坐标轴文本）都高亮",
        },
        // 堆叠柱状图可用
        // {
        //   value: "element-link",
        //   text: "同类连接",
        // },
        {
          value: "brush-x",
          text: "框选过滤图形",
        },
      ],
      dataList: [
        { year: "1901 年", type: "衣服", nums: 7 },
        { year: "1901 年", type: "裤子", nums: 6.9 },
        { year: "1901 年", type: "鞋子", nums: 9.5 },
        { year: "1902 年", type: "衣服", nums: 10.2 },
        { year: "1902 年", type: "裤子", nums: 11.4 },
        { year: "1902 年", type: "鞋子", nums: 13.2 },
        { year: "1903 年", type: "衣服", nums: 10.2 },
        { year: "1903 年", type: "裤子", nums: 11.3 },
        { year: "1903 年", type: "鞋子", nums: 13.6 },
        { year: "1904 年", type: "衣服", nums: 14.8 },
        { year: "1904 年", type: "裤子", nums: 13.2 },
        { year: "1904 年", type: "鞋子", nums: 12.4 },
        { year: "1905 年", type: "衣服", nums: 13.6 },
        { year: "1905 年", type: "裤子", nums: 14.2 },
        { year: "1905 年", type: "鞋子", nums: 14.2 },
      ],
    };
  },
  watch: {
    // 监听图表变化更新数据
    dataList(newValue) {
      this.chart.changeData(newValue);
    },
    //
    checkList(newValue, oldValue) {
      const temp = newValue.concat(oldValue);
      // 新旧数组拼接，如果重前查索引和重后查索引值一致，表示这一项是变化项。
      const diffList = temp.filter((item, index, arr) => {
        return arr.indexOf(item) === arr.lastIndexOf(item);
      });
      console.log(diffList);
      // 新 > 旧 添加交互事件
      if (newValue.length > oldValue.length) {
        diffList.forEach((item) => {
          this.chart.interaction(item);
        });
        // 新 < 旧 删除交互事件
      } else {
        diffList.forEach((item) => {
          this.chart.removeInteraction(item);
        });
      }
      this.chart.render();
    },
  },
  created() {
    // 模拟数据变化
    setTimeout(() => {
      this.dataList.push(
        { year: "1906 年", type: "衣服", nums: 13.5 },
        { year: "1906 年", type: "裤子", nums: 12.8 },
        { year: "1906 年", type: "鞋子", nums: 13.5 }
      );
    }, 2000);
  },
  mounted() {
    this.chart = new Chart({
      // 指定图表容器 ID
      container: "bar_basic",
      // 自适应宽度，容器伸缩会重新渲染图表
      autoFit: true,
      // 容器的高度
      height: 500,
      // 图表的外侧内边距
      padding: [40, 80, 80, 80],
      // 设置默认交互形式 tooltip element-active
      defaultInteractions: this.checkList,
    });
    // 给图表赋值
    this.chart.data(this.dataList);

    // 设置度量
    this.chart.scale({
      nums: {
        // nice 是否字段分配刻度
        nice: true,
        // 把 nums 重命名为 销售量，因为图表默认会把键值当作显示的元素。我们不想显示 nums 而是希望展示更易懂的 “销售量”，所有进行了定义别名。
        alias: "销售量",
        // 将所有 nums 输出的值进行变形，给他加上单位
        formatter: (val) => {
          return val + "万件";
        },
      },
    });
    // 设置提示信息
    this.chart.tooltip({
      // 是否显示 tooltips 辅助线。
      showCrosshairs: false,
      // 是否显示辅助点
      showMarkers: false,
      shared: true,
    });
    // 设置坐标轴，这里只设置了 nums 的坐标轴。
    this.chart.axis("nums", {
      // 设置 title , 当前 title 的内容为键值 nums，因为 nums 设置了别名所以显示销售量
      title: {
        // 文字样式
        style: {
          fontSize: 16, // 文本大小
          textAlign: "center", // 文本对齐方式
        },
        // 文字偏移量
        offset: 60,
      },
    });

    // 绘制 线  x 轴为 year y 轴为 nums。图形形状为 smooth (平滑线)
    this.chart
      .interval()
      // color会开启图例
      .color("type")
      .position("year*nums")
      .adjust([
        {
          // dodge：分组散开，将同一个分类的数据进行分组在一个范围内均匀分布
          type: "dodge",
          // 组间间距为0
          marginRatio: 0,
        },
      ]);
    // 取消图例交互
    this.chart.removeInteraction("legend-filter");

    // 渲染图表
    this.chart.render();
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
  .title {
    width: 100%;
    font-size: 28px;
    font-weight: 600;
    text-align: left;
  }
  .subtitle {
    width: 100%;
    font-size: 24px;
    font-weight: 600;
    text-align: left;
  }
  .checkgroup {
    width: 100%;
    text-align: left;
    padding: 16px;
    box-sizing: border-box;
  }
}
</style>